<template>
	<view class="Billing-box">
		<view class="Billing-top">
			<u-navbar title="开票">
				<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
			</u-navbar>
		</view>
		<view class="Billing-auto">
			<u-row gutter="16">
				<u-col span="12">
					<view class="demo-layout bg-purple" style="font-weight: bold;">填写信息</view>
				</u-col>
				<u-col span="12" class="Billing-auto-corporatename">
					<u-form :model="form" ref="uForm">
						<u-form-item label="公司名称" prop="name"><u-input v-model="form.name" placeholder="请输入公司的名称" /></u-form-item>
						<u-form-item label="税号" prop="taxnumber"><u-input v-model="form.taxnumber" placeholder="请输入公司税号" /></u-form-item>
						<u-form-item label="开票方式" prop="payType" label-width="150">
							<u-radio-group v-model="value" @change="radioGroupChange">
								<u-radio shape="circle" v-for="(item, index) in list" :key="index" :name="item.name">{{ item.name }}</u-radio>
							</u-radio-group>
						</u-form-item>
						<view v-if="value == '纸质发票'">
							<u-form-item :label-position="labelPosition" label="邮寄地区" prop="region" label-width="150">
								<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.region" placeholder="请输入邮寄地区" @click="pickerShow = true"></u-input>
								<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
							</u-form-item>
							<u-form-item label="详细地址" prop="Detailedaddress"><u-input v-model="form.Detailedaddress" placeholder="请输入邮寄的详细地址" /></u-form-item>
							<u-form-item label="联系人" prop="contacts"><u-input v-model="form.contacts" placeholder="请输入联系人姓名" /></u-form-item>
							<u-form-item label="联系电话" prop="contactnumber"><u-input v-model="form.contactnumber" placeholder="请输入联系人手机号" /></u-form-item>
						</view>
						<u-form-item label="票面金额" prop=""><u-input v-model="form.goldforehead" :disabled="true"/></u-form-item>
						<u-form-item label="票据类型" prop="" class="Billing-auto-Billtype">
							<u-radio-group v-model="value1" @change="radioGroupChange1">
								<u-radio @change="radioChange1" v-for="(item, index) in Billtype" :key="index" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
				</u-col>
			</u-row>
		</view>
		<view class="Billing-bottom" style="margin: 30px 50px;">
			<u-button type="primary" @click="submit">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border: false,
				pickerShow: false,
				labelPosition: 'left',
				show: false,
				form: {
					name: '',
					region: '',
					taxnumber: '',
					Detailedaddress: '',
					contacts: '',
					contactnumber: '',
					goldforehead: '2000.00'
				},
				rules: {
					region: [
						{
							required: true,
							message: '请输入邮寄地区',
							trigger: 'change',
						}
					],
					name: [
						{ 
							required: true, 
							message: '请输入公司的名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					taxnumber:[
						{
							required: true, 
							message: '请输入公司税号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					Detailedaddress:[
						{
							required: true, 
							message: '请输入邮寄的详细地址', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					contacts:[
						{
							required: true, 
							message: '请输入联系人姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					contactnumber: [
						{
							required: true, 
							message: '请输入联系人手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				},
				list: [
					{
						name: '纸质发票',
						disabled: false
					},
					{
						name: '电子发票',
						disabled: false
					}
				],
				Billtype: [
					{
						name: '增值税普通发票',
						disabled: false
					},
					{
						name: '增值税专用发票',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value1: '增值税普通发票',
				value: '纸质发票',
				radio: '',
				switchVal: false
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange1(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange1(e) {
				// console.log(e);
			},
			// 选择地区回调
			regionConfirm(e) {
				this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style>
	.Billing-auto-corporatename .Billing-auto-Billtype /deep/ .u-radio__label{
		margin-left: 5px !important;
		margin-right: 0px;
	}
	.Billing-auto-corporatename /deep/ .u-radio-group{
		width: 100%;
	}
	.Billing-auto-corporatename /deep/ .u-radio{
		width: 50% !important;
	}
	.Billing-auto-corporatename /deep/ .u-radio__label{
		margin-left: 10px !important;
	}
	.Billing-auto-corporatename /deep/ .u-form-item--left{
		flex: 0 0 80px !important;
	}
	.Billing-auto-corporatename /deep/ .u-form-item__message{
		padding-left: 80px !important;
	}
</style>
<style lang="scss" scoped>
	.Billing-box{
		padding: 30upx;
		border-top: 10px solid #F7FCFF;
	}
</style>
